<template>
  <page-view :title="title">
    <a-card>
      <a-form :form="form">
        <a-form-item label="用户账号" v-bind="formItemLayout">
          <a-input v-decorator="field('name','账号')"/>
        </a-form-item>
        <a-form-item label="初始密码" v-bind="formItemLayout">
          <a-input v-decorator="field('pwd','初始密码',true,'123456')"/>
        </a-form-item>
        <a-form-item label="昵称" v-bind="formItemLayout">
          <a-input v-decorator="field('nick','昵称', false)"/>
        </a-form-item>
        <a-form-item label="电话" v-bind="formItemLayout">
          <a-input v-decorator="field('phone','电话',false)"/>
        </a-form-item>
        <a-form-item label="部门" v-bind="formItemLayout">
          <a-tree-select
            :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
            :treeData="deptTree"
            placeholder="请选择所属部门"
            treeDefaultExpandAll
            :treeDataSimpleMode="true"
            v-decorator="field('deptId','电话')"
          >
          </a-tree-select>
        </a-form-item>
        <a-form-item label="是否超级管理员" v-bind="formItemLayout">
          <a-radio-group v-decorator="field('root','是否超级管理员',true,false)" @change="handleRootChange">
            <a-radio :value="true">是</a-radio>
            <a-radio :value="false">否</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item v-if="!root" label="角色" v-bind="formItemLayout">
          <a-radio-group v-decorator="field('roleId','角色',true,[])">
            <a-radio :style="radioStyle"
                     v-for="r in roles"
                     :key="r.id"
                     :value="r.id">{{r.name}}
            </a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </a-card>
    <footer-tool-bar :style="{ width: '100%'}">
      <a-button style="margin-right: 20px;" @click="$router.go(-1)">取消</a-button>
      <a-button type="primary" @click="submitForm" :loading="loading">提交</a-button>
    </footer-tool-bar>
  </page-view>
</template>

<script>

  import {field} from '@/utils/util'
  import {findDepts} from '@/api/dept'
  import {findRoles} from '@/api/role'
  import {addUser} from '@/api/user'
  import {mixin, mixinDevice} from '@/utils/mixin'
  import FooterToolBar from '@/components/FooterToolbar'
  import {PageView} from '@/layouts'
  import md5 from 'md5'

  export default {

    mixins: [mixin, mixinDevice],

    components: {
      PageView,
      FooterToolBar,
    },

    data() {
      return {
        form: this.$form.createForm(this),
        radioStyle: {
          display: 'block',
          height: '30px',
          lineHeight: '30px',
        },
        root: null,
        deptTree: [],// 部门选项
        roles: [],// 角色选项
        formItemLayout: {
          labelCol: {span: 6},
          wrapperCol: {span: 12}
        },
        loading: false,
      }
    },

    computed: {
      title() {
        return this.$route.meta.title
      },
      fields() {
        let fields = ['name', 'nick', 'pwd', 'phone', 'root', 'deptId']
        if (!this.root) {
          fields.push('roleId')
        }
        return fields
      }
    },

    created() {
      this.loadDeptTreeOptions()
      this.loadRoleOptions()
    },

    methods: {

      field,

      loadDeptTreeOptions() {
        findDepts().then(resp => {
          this.deptTree = resp.result.list.map(dept => {
            return {
              id: dept.id + '',
              pId: dept.parent + '',
              rootPid: 0 + '',
              value: dept.id + '',
              label: dept.name,
            }
          })
        })
      },

      loadRoleOptions() {
        findRoles().then(resp => {
          this.roles = resp.result.list
        })
      },

      handleRootChange(e) {
        this.root = e.target.value
      },

      // 提交
      submitForm() {
        this.form.validateFields(this.fields, (err, values) => {
          if (!err) {
            let data = Object.assign({}, values)
            data.pwd = md5(data.pwd)
            data.deptId = parseInt(data.deptId)
            addUser(data).then(() => {
              this.$message.success('新增用户成功')
              this.$router.push('/system/user-manage/list')
            })
          }
        })
      }
    }

  }
</script>

<style lang="less" scoped>
  .card {
    margin-bottom: 24px;
  }
</style>
